<template>
  <div id="app">

    <div>
      <div id="hometop">
        <van-search v-model="value" shape="round" background="#ff0000" placeholder="请输入搜索关键词"/>
      </div>
      <div class="home-banner-box">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in bannerList" :key="item.id">
            <img :src="item.img" alt="" id="imgb">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="notify">
        <van-notice-bar background="#ffffff" color="#000000" mode="link">本商城为测试站，请勿真实下单~。</van-notice-bar>
      </div>
      <div class="gezhi">
        <van-grid square>
          <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字"/>
        </van-grid>
      </div>
      <div class="cahozhibaokuan">
        <div>超值爆款:</div>
        <div>
          <div class="div1">今日推荐
            <img :src="bannerList[0].img" alt="" id="imgb">
          </div>
          <div class="div1">热门榜单
            <img :src="bannerList[0].img" alt="" id="imgb">
          </div>
        </div>
        <div>
          <div class="div1">首发新品
            <img :src="bannerList[0].img" alt="" id="imgb">
          </div>
          <div class="div1">促销榜单
            <img :src="bannerList[0].img" alt="" id="imgb">
          </div>
        </div>
      </div>

      <div class="div2">
        <div class="div1">
          <span>{{couponList[0].couponPrice}}元</span>￥<br/>
          <span>{{couponList[0].couponName}}</span>
          <span v-if="couponList[0].status==1">立即领取</span>
          <span v-if="couponList[0].status==0">已领取</span>
        </div>
        <div class="div1">
            <span>{{couponList[1].couponPrice}}元</span>￥<br/>
            <span>{{couponList[1].couponName}}</span>
              <span v-if="couponList[1].status==1">立即领取</span>
              <span v-if="couponList[1].status==0">已领取</span>
        </div>
        <div class="div1">
          <span>{{couponList[2].couponPrice}}元</span>￥<br/>
          <span>{{couponList[2].couponName}}</span>
          <span v-if="couponList[2].status==1">立即领取</span>
          <span v-if="couponList[2].status==0">已领取</span>
        </div>
      </div>
      <div id="pintuan">
        <div>拼团活动 xx人拼团成功</div>
        <div>
          <div class="div1">
            <img :src="groupList[0].img" alt="" id="imgb">
            <div>{{groupList[0].name}}</div>
            <div>{{groupList[0].price}}￥</div>
            <div>立即参与</div>
          </div>
          <div class="div1">
            <img :src="groupList[1].img" alt="" id="imgb">
            <div>{{groupList[1].name}}</div>
            <div>{{groupList[1].price}}￥</div>
            <div>立即参与</div>
          </div>
        </div>
      </div>
      <div id="kanjia">
        <div>砍价专区·BARGAINING</div>
        <div>
          <div class="div1">
            <img :src="bargainingList[0].img" alt="" id="imgb">
            <div>{{bargainingList[0].price}}￥</div>
            <div>立即砍价</div>
          </div> <div class="div1">
            <img :src="bargainingList[1].img" alt="" id="imgb">
            <div>{{bargainingList[1].price}}￥</div>
            <div>立即砍价</div>
          </div>

        </div>
      </div>
      <div id="miaosah">
        <div>限时秒杀
          <van-count-down class="div1" :time="time" format="DD 天 HH 时 mm 分 ss 秒"/>
        </div>
        <div>
          <div class="div1">
            <img :src="secKillList[0].productImg" alt="" id="imgb">
            <div><span>{{secKillList[0].productName}}</span></div>
            <div>{{secKillList[0].price}}￥</div>
            <div>立即秒杀</div>
          </div>
          <div class="div1">
            <img :src="secKillList[1].productImg" alt="" id="imgb">
            <div><span>{{secKillList[1].productName}}</span></div>
            <div>{{secKillList[1].price}}￥</div>
            <div>立即秒杀</div>
          </div>
        </div>
      </div>
      <div>
        <van-tabs v-model="active1">

          <van-tab title="首发新品">
            <van-cell v-for="item in homeList" :key="item">
<!--              {{ item }}-->
              <div class="div3" v-if="item.comRecommend.includes('1')">
                <img :src="item.comUrl" alt="" id="imgb">
                <div>
                  <span>{{ item.comName }}</span>
                  <br>
                  <span> {{ item.comPrice }}￥</span>
                </div>
              </div>
            </van-cell>

          </van-tab>
          <van-tab title="精品推荐">
            <van-cell v-for="item in homeList" :key="item">
              <!--              {{ item }}-->
              <div class="div3" v-if="item.comRecommend.includes('2')">
                <img :src="item.comUrl" alt="" id="imgb">
                <div>
                  <span>{{ item.comName }}</span>
                  <br>
                  <span> {{ item.comPrice }}￥</span>
                </div>
              </div>
            </van-cell>


          </van-tab>
          <van-tab title="热门榜单">
            <van-cell v-for="item in homeList" :key="item">
              <!--              {{ item }}-->
              <div class="div3" v-if="item.comRecommend.includes('3')">
                <img :src="item.comUrl" alt="" id="imgb">
                <div>
                  <span>{{ item.comName }}</span>
                  <br>
                  <span> {{ item.comPrice }}￥</span>
                </div>
              </div>
            </van-cell>


          </van-tab>
          <van-tab title="畅销单品">
            <van-cell v-for="item in homeList" :key="item">
              <div  class="div3" v-if="item.comRecommend.includes('4')">
                <img :src="item.comUrl" alt="" id="imgb">
                <div>
                  <span>{{ item.comName }}</span>
                  <br>
                  <span> {{ item.comPrice }}￥</span>
                </div>
              </div>
            </van-cell>

          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="divend">
      <span>陕ICP备14011498号-3</span>
    </div>


    <div>

      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/classification">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/page1">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/page1">我的</van-tabbar-item>
      </van-tabbar>
      <router-view />


<!--      <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">-->
<!--       -->
<!--      </van-tabbar>-->
    </div>
  </div>

</template>

<script>

import axios from "axios";

export default {
  data() {
    return {
      active: '/home',
      bannerList: [],
      couponList: [],
      homeList: [],
      groupList: [],
      secKillList:[],
      bargainingList:[],
      time: 30 * 60 * 60 * 1000,
      active1: 0,
      value: '',
    }
  },
  methods: {},
  created() {
    axios.get('http://localhost:8081/content/content/list').then(res => {
      console.log(res.data)
      this.bannerList = res.data
    })
    axios.get('http://localhost:8081/coupon/coupon/list').then(res => {
      console.log(res.data)
      this.couponList = res.data
    })
    axios.get('http://localhost:8081/item/item/list').then(res => {
      console.log(res.data)
      this.homeList = res.data
    })
    axios.get('http://localhost:8081/group/group/list').then(res => {
      console.log(res.data)
      this.groupList = res.data
    })
    axios.get('http://localhost:8081/seckill/seckill/list').then(res => {
      console.log(res.data)
      this.secKillList = res.data
    })
    axios.get('http://localhost:8081/bargaining/bargaining/list').then(res => {
      console.log(res.data)
      this.bargainingList = res.data
    })
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}


#app {
  margin: 0;
  padding: 0;
  background-color: gainsboro;
}


.home-banner-box {
  width: 100%;

}

#imgb {
  width: 100%;
  height: 5rem;
}

#pintuan {
  background-color: aqua;
  margin-bottom: 0.625rem;
}

#kanjia {
  background-color: bisque;
  margin-bottom: 0.3125rem;
}

#miaosah {
  background-color: blue;
  margin-bottom: 0.3125rem;
}

.notify {
  margin: 0.3125rem;
}

.gezhi {
  margin-bottom: 0.625rem;
}

.cahozhibaokuan {
  margin: 0.9375rem;
}

.div1 {
  display: inline-block;
  margin: 0.625rem;
}
.div3{
  display: inline-block;
}
.div2 .div1 {
  width: 6.25rem;
  height: 3.125rem;
  background-color: red;
}

.div2 {
  background-color: aquamarine;
  margin-bottom: 0.3125rem;
}


.divend {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6.25rem;
}
</style>